<template>
  <div class="centerOne">
    <div class="c-top">
      <div class="headInfo">
        <div class="text">数据湖</div>
        <img src="@/assets/newDashboard/箭头.png" alt="" />
      </div>
      <div class="c-top-box">
        <!-- <img src="@/assets/index/实时数据-四边.png" alt="" /> -->
        <div class="c-box-content">
          <div class="b-c-l">实时数据</div>
          <div class="b-c-c">
            <!-- <div class="b-c-c-ul2" v-if="realList.length > 9">
              <div
                class="b-c-c-li"
                v-for="(item, index) in realList.slice(0, realList.length - 9)"
                :key="index"
              >
                <img src="@/assets/newDashboard/数字底图.png" alt="" />

                <div class="c-li-box">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="b-c-c-ul" v-if="realList.length > 9">
              <div
                class="b-c-c-li"
                v-for="(item, index) in realList.slice(
                  realList.length - 9,
                  realList.length
                )"
                :key="index"
              >
                <img src="@/assets/newDashboard/数字底图.png" alt="" />

                <div class="c-li-box">
                  {{ item }}
                </div>
              </div>
            </div> -->

            <div v-show="isShow" class="b-c-c-ul">
              <div class="b-c-c-li" v-for="(item, index) in realList" :key="index">
                <flipCard :ref="'flipCard' + (index + 1)"></flipCard>
              </div>
            </div>
            <div v-show="!isShow" class="b-c-c-ul">
              <div class="b-c-c-li" v-for="(item, index) in hisList" :key="index">
                <flipCard :ref="'hisCard' + (index + 1)"></flipCard>
              </div>
            </div>
          </div>
          <div class="b-c-r" v-show="isShow">条</div>
          <div class="b-c-r" v-show="!isShow">亿</div>
        </div>
        <div class="tab-box">
          <div class="tab-item" :class="{ activeBg: tab == 1 }" @click="handleCheck(1)">当前周</div>
          <div class="tab-item" :class="{ activeBg: tab == 2 }" @click="handleCheck(2)">历史数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import flipCard from '../components/FlipCard.vue'
import { getAccumulation } from '@/api/timedTask/index.js'
import Cookies from 'js-cookie'

export default {
  name: 'SdssJddsZhgjWebCenterOne',
  components: {
    flipCard,
  },
  watch: {
    realList(newValue, oldValue) {
      this.flipObjs.map((item, index) => {
        item[0].flipDown(oldValue[index], newValue[index])
      })
    },
    hisList(newValue, oldValue) {
      // console.log(newValue, oldValue, 'oldValue')
      this.hisObjs.map((item, index) => {
        item[0].flipDown(oldValue[index], newValue[index])
      })
    },
  },
  data() {
    return {
      flipObjs: [],
      hisObjs: [],
      realList: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      hisList: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      isShow: true,
      time: null,
      tab: 1,
    }
  },
  beforeDestroy() {
    clearInterval(this.time)
  },
  created() { },
  mounted() {
    this.initData()
    if (Cookies.get('Admin-Token')) {
      // this.realList = Array(11).fill(0)
      // this.hisList = Array(11).fill(0)
      getAccumulation().then((response) => {
        if (response.data.code == 200) {
          // console.log(response, 'createdcreated')
          this.realList = response.data.data.realTime.padStart(11, '0').slice(0, 11).split('')
          // console.log(this.realList, '6666666')
          this.hisList = response.data.data.history.padEnd(11, '0').slice(0, 11).split('')
        }

      })
    }
  },

  methods: {
    initData() {
      this.realList.map((item, index) => {
        this.flipObjs.push(this.$refs['flipCard' + (index + 1)])
      })
      this.hisList.map((item, index) => {
        this.hisObjs.push(this.$refs['hisCard' + (index + 1)])
      })
 
      this.time = setInterval(this.getNumbers, 3000)
    },
    getNumbers() {
      getAccumulation().then((response) => {

        if (response.data.code == 200) {
          const fixedValue = response.data.data.history
          const paddedValue = fixedValue.padEnd(11, '0')
          this.hisList = paddedValue.split('').slice(0, 11)
          let end = response.data.data.realTime.toString().padStart(11, '0')
          let star = this.realList.join('').padStart(11, '0')
          let num = Number(end) - Number(star)
          let nums = this.divideIntoIntegers(num)
          for (let i = 1; i <= 10; i++) {
            setTimeout(() => {
              let current = Number(this.realList.join('')) + nums[i - 1]
              this.realList = current.toString().padStart(11, '0').split('')
              // console.log(
              //   current.toString().padStart(11, '0').split(''),
              //   '-----realList-------------'
              // )
            }, i * 1000)
          }
        }


        // this.$refs.flipCard.flipDown(0, 1)
        // for (let i = 0; i < this.flipObjs.length; i++) {
        //   if (nowTimeStr[i] === nextTimeStr[i]) {
        //     continue
        //   }
        //   this.flipObjs[i].flipDown(
        //     nowTimeStr[i],
        //     nextTimeStr[i]
        //   )
        // }
      })
    },
    divideIntoIntegers(number) {
      let quotient = Math.floor(number / 10)
      let remainder = number % 10
      let result = []

      for (let i = 0; i < 10; i++) {
        result.push(quotient + (i < remainder ? 1 : 0))
      }

      return result
    },
    //按钮切换
    handleCheck(e) {
      this.tab = e
      if (e == 1) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.centerOne {
  width: 100%;
  height: 28%;
  // background-color: yellow;
  // margin-top: 1vh;
  margin-bottom: 1.5vh;
}

.c-top {
  width: 100%;
  height: 100%;
  // background-color: #FFFFFF;
  // border-radius: calc(var(--num)*5px);
  // padding: calc(var(--num)*30px) calc(var(--num)*50px);
  box-sizing: border-box;
  border-radius: 0.2604vw;
  padding: 1.0417vw;
  padding-top: 1vh;
  box-sizing: border-box;
  box-shadow: 0px 0.2083vw 0.8333vw 13.0208vw rgba(2, 54, 68, 0.8) inset;
}

.c-top-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.c-top-box img {
  width: 100%;
  height: 100%;
}

.c-box-content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 1.4583vw 0.0417vw;
  padding-top: 0.5vw;
  display: flex;
  justify-content: space-evenly;
  // justify-content: space-between;
  align-items: center;
}

.b-c-l,
.b-c-r {
  font-size: 1.25vw;
  color: #ffffff;
  font-weight: 500;
}

.b-c-c-ul {
  display: flex;
  justify-content: space-between;
  margin: 0 0.9896vw 0 1.3542vw;
}

.b-c-c-ul2 {
  display: flex;
  justify-content: flex-end;
  margin: 0 0.9896vw 0 1.3542vw;
}

.b-c-c-li {
  position: relative;
  margin-right: 0.4688vw;
}

.b-c-c-li img {
  width: 2.8646vw;
  height: 5.5556vh;
}

.c-li-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 38%;
  transform: translateY(-50%);
  line-height: 3.8021vw;
  text-align: center;
  font-size: 2.0833vw;
  font-weight: 600;
  color: #ffffff;
}

.headInfo {
  margin: 0 auto;
  width: 60%;
  height: 4.5vh;
  margin-top: 0.78vh;
  background-image: url('~@/assets/newDashboard/headInfo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .text {
    text-align: center;
    font-size: 1.25vw;
    font-family: Source Han Sans CN;
    font-weight: 800;
    color: #ffffff;
  }

  img {
    display: block;
    width: 0.8594vw;
    height: 1.0185vh;
    position: absolute;
    top: 50%;
    right: -29%;
    transform: translate(-50%, -50%);
  }
}

.tab-box {
  position: absolute;
  top: -5%;
  right: 3%;
  display: flex;
  align-items: center;

  .tab-item {
    cursor: pointer;
    width: 4.1667vw;
    height: 3.2407vh;
    line-height: 3.2407vh;
    text-align: center;
    font-size: 0.7292vw;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #f2f6ff;
    background-image: url('~@/assets/newDashboard/未选.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0.5208vw;
  }

  .activeBg {
    width: 4.1667vw;
    height: 3.2407vh;
    line-height: 3.2407vh;
    font-size: 0.7292vw;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    background-image: url('~@/assets/newDashboard/选中.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>
